.knowledgeDiv {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .knowledgeLeftDiv {
    flex: 1;
    width: calc(100% - 20rem - 1rem);
    padding-top: 1rem;
    padding-bottom: 1rem;

    .knowledgeLeftTowDiv {
      background-color: var(--bg-second);
      box-shadow: var(--box-shadow);

      .knowledgeLeftTowInnerDiv {
        width: 100%;
        overflow: hidden;
        padding: 1rem;
        background-color: var(--bg-second);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);

        .knowledgeListDiv {
          position: relative;

          .knowledgeListDiv:after {
            content: "";
            position: absolute;
            bottom: -1rem;
            width: 100%;
            height: 1px;
            background: var(--border-color);
          }

          >a {
            display: inline-block;
            text-decoration: none;
            background-color: transparent;
            outline: none;
            cursor: pointer;
            transition: color .3s;
          }

          >a:hover .headerTopDiv {
            color: red;
          }

          header {
            display: flex;
            align-items: center;

            .headerTopDiv {
              color: var(--main-text-color);
              overflow: hidden;
              font-weight: 600;
              font-size: 16px;
              line-height: 22px;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-synthesis: style;
            }

            .headerBottomDiv {
              font-size: .8em;
              color: #8590a6;

              .headerBottomMaddleDiv {
                position: relative;
                top: -0.06em;
                display: inline-block;
                height: 0.9em;
                margin: 0 8px;
                vertical-align: middle;
                border-top: 0;
                border-left: 1px solid rgba(0, 0, 0, .06);
              }
            }
          }

          main {
            display: flex;
            flex-wrap: nowrap;
            padding-top: 12px;

            .mainDivLeft {
              position: relative;
              flex: 0 0 auto;
              width: 190px;
              max-height: 150px;
              min-height: 100px;
              border-radius: var(--border-radius);
              margin-right: 1rem;
              overflow: hidden;

              img {
                position: absolute;
                top: 50%;
                left: 50%;
                height: 100%;
                width: 100%;
                transform: translate3d(-50%, -50%, 0);
                object-fit: cover;
              }
            }

            .mainDivRight {
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .mainDivRightTop {
                display: -webkit-box;
                max-width: 100%;
                color: var(--main-text-color);
                overflow: hidden;
                font-size: 14px;
                text-overflow: ellipsis;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
              }

              .mainDivRightBottom {
                width: 100%;
                color: #8590a6;
                font-size: 14px;
                line-height: 20px;
                margin-top: 0.8rem;

                .anticon {
                  display: inline-block;
                  color: inherit;
                  font-style: normal;
                  line-height: 0;
                  text-align: center;
                  text-transform: none;
                  vertical-align: -0.125em;
                  text-rendering: optimizeLegibility;
                  -webkit-font-smoothing: antialiased;
                }

                .anticonInner {
                  margin-left: 6px;
                  color: var(--second-text-color);
                }

                .mainDian {
                  margin: 0 8px;
                }

                .anticonShareAlt {
                  display: inline-block;
                  color: inherit;
                  font-style: normal;
                  line-height: 0;
                  text-align: center;
                  text-transform: none;
                  vertical-align: -0.125em;
                  text-rendering: optimizeLegibility;
                  -webkit-font-smoothing: antialiased;
                }

                .foll {
                  margin-left: 6px;
                  color: var(--second-text-color);
                }
              }
            }
          }
        }
      }

    }
  }

  .knowledgeRightDiv {
    width: 20rem;
    margin-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;

    .sticky {
      position: sticky;
      top: 1rem;
      margin-bottom: 1rem;

      .stickyTopDiv {
        border-radius: var(--border-radius);
        background-color: var(--bg-second);
        box-shadow: var(--box-shadow);
        margin-bottom: 1.3rem;
        line-height: 1.29;
        overflow: hidden;
      }

      .stickyBottom {
        border-radius: var(--border-radius);
        margin-bottom: 1.3rem;
        background-color: var(--bg-second);
        box-shadow: var(--box-shadow);
        line-height: 1.29;
        overflow: hidden;
      }
    }
  }
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

  .knowledgeRightDiv {
    display: none;
  }
}
